<script setup>

import {Plus,Upload} from '@element-plus/icons-vue'
import {userInfoStore} from "@/stores/userinfo";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {updateAvatarReq, updateUserReq} from "@/api/user";
import {userTokenStore} from "@/stores/token";

const userStore = userInfoStore()
const userToken=userTokenStore()
const userInfo=ref({...userStore.getUserInfo()})
//从缓存中获取头像地址
const imageUrl=ref(userInfo.value.userPic)
//发送 请求更改用户信息
const updateUserInfo = async () => {
  let result = await updateUserReq(userInfo.value);
  ElMessage.success(result.message)

  //修改缓存中的用户信息
  userStore.setUserInfo(userInfo.value)
}
//上传组件引用
const uploadRef=ref()

//上传之前添加参数
const beforeUpload = () => {
  return {'fileType':0}
}

//更新用户头像
const handleAvatarSuccess = (resp) => {
  //获取上传后的头像数据
  //设置用户头像回显
  imageUrl.value=resp.data
}

const updateAvatar =async () => {
  //发生请求更改用户信息
  let result =await updateAvatarReq(imageUrl.value);
  ElMessage.success(result.message)
  //设置缓存用户头像
  userStore.userInfo.userPic=imageUrl.value
}

const rules={
  nickname:[
    //非空校验
    { required: true, message: '请输入您的昵称', trigger: 'blur' },
    //长度校验
    { min:2,max:10, message: '昵称长度必须为2-10', trigger: 'change' },
  ],
  email:[
    //非空校验
    { required: true, message: '请输入您的邮箱', trigger: 'blur' },
    //邮箱格式验证
    { type:'email', message: '邮箱格式不正确', trigger: 'blur' },
  ]
}

</script>

<template>
  <el-card class="card-container">
    <template #header>
      <div class="card-header">
        <span>用户信息</span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form :model="userInfo" :rules="rules">
          <el-form-item label="用户名：" label-width="80px">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item prop="nickname" label="用户昵称" label-width="80px">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="用户邮箱" label-width="80px">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateUserInfo()" class="uploadUpdate">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--更换头像-->
      <el-col :span="12">
        <el-upload
            ref="uploadRef"
            class="avatar-uploader"
            :data="beforeUpload"
            action="http://localhost:8080/upload"
            :show-file-list="false"
            :headers="{'token':userToken.getToken()}"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" width="320" height="180" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <br>
        <el-button type="primary" :icon="Plus" class="avatar-uploader" @click="uploadRef.$el.querySelector('input').click()">选择图片</el-button>
        <el-button type="success" :icon="Upload" class="avatar-uploader" @click="updateAvatar" >上传头像</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
@import "@/assets/base.css";

.avatar-uploader{
  margin-inline: 85px;
  margin-left: 190px;
}
.uploadUpdate{
  width: 100px;
  font-size: 15px;
  height: 35px;
  margin-top: 20px;
  margin-left: 200px;
}
</style>